<template>
  <el-card style="min-width:110px">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
    </div>
    <div class="content" :class="showClass">{{ content===''?'0':content }}{{ suffix }}</div>
  </el-card>
</template>

<script>
export default {
  name: 'MyCard',
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    }
  },
  computed: {
    showClass() {
      if (Number(this.content) > 0) {
        return 'largeZero'
      } else if (Number(this.content) < 0) {
        return 'lessZero'
      }
      return ''
    }
  }
}
</script>

<style scoped>
.title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 18px;
  color: #333;
  box-sizing: border-box;
}

.content{
  color: #333;
  display: block;
  line-height: 24px;
  font-size: 24px;
  box-sizing: border-box;
}

.largeZero{
  color: red;
}

.lessZero{
  color: green;
}
</style>
